<template>
  <a-select size="small" :disabled="disabled" v-model="innerValue" style="width: 100px;">
    <a-select-option @mousedown.stop v-for="item in fontOptions" :value="item.en">
      {{ item.ch }}
    </a-select-option>
  </a-select>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';

export default {
  name: 'FontSelector',
  model: createModelForVue(),
  props: {
    section: createProps(Object, undefined),
    value: createProps(String),
    disabled: createProps(Boolean),
  },
  data() {
    return {
      fontOptions
    };
  },
  computed: {
    innerValue: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit('change', v);
        this.section && this.section.setStyle && this.section.setStyle('font-family', v);
      },
    }
  }
};
const fontOptions = [{
  ch: '宋体',
  en: 'SimSun'
}, {
  ch: '黑体',
  en: 'SimHei'
}, {
  ch: '微软雅黑',
  en: '"Microsoft YaHei"'
}, {
  ch: '微软正黑体',
  en: 'Microsoft JhengHei'
}, {
  ch: '楷体',
  en: 'KaiTi'
}, {
  ch: '新宋体',
  en: 'NSimSun'
}, {
  ch: '仿宋',
  en: 'FangSong'
}];
</script>